	<template>
    <div style="padding: 20px;">
        <div class="table-wrap">

            <el-tabs v-model="activeName" @tab-click="handleClick">
               
                <el-tab-pane label="回复超时记录" name="second">
                    <!--我的邀约列表-->
                    <el-form :inline="true" ref="form" :model="form" label-width="80px"
                        style=" display: flex;flex-direction: column;">
                        <div>
                            <el-form-item label="触发员工" prop="qunfa_type"  @click="chose_yuangong" style="margin-left: -20px;">
                                <el-select size="mini" v-model="form.yuangong" multiple placeholder="请选择">
                                    <el-option
                                      v-for="item in yuangong_list"
                                      :key="item.name"
                                      :label="item.name"
                                      :value="item.name">
                                    </el-option>
                                  </el-select>
                                  
                            </el-form-item>
                            <el-form-item>
                                <el-date-picker size="mini" v-model="form.date" type="daterange" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="search" size="mini">搜索</el-button>

                                <el-button size="mini" @click="resetForm('form')">重置</el-button>
                               
                            </el-form-item>
                            <div>
                                <span v-if="chaoshi == 0" style="font-size: 14px;">监控中...   超时{{num}}分钟记录</span>
                            </div>
                            <el-table :data="tableData_trigger" v-loading="loading"
                                style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all>
                                <el-table-column prop="yuangong" label="触发员工"></el-table-column>
                                <el-table-column prop="client" label="客户名称"></el-table-column>
                                <el-table-column prop="date_time" label="触发时间"></el-table-column>
                                <el-table-column prop="type_ch" label="消息类型"></el-table-column>
                                <el-table-column prop="content" label="消息内容"></el-table-column>
                            </el-table>
                            <div class="block">
                                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                    :current-page="form.pageNumber_trigger" :page-sizes="[10, 50, 100, 200]"
                                    :page-size="form.pageSize_trigger" background
                                    layout="total, sizes, prev, pager, next, jumper" :total="form.total_trigger">
                                </el-pagination>
                            </div>
                        </div>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="回复超时设置" name="third">
                    <el-form :inline="true" ref="form" :model="form" label-width="80px"
                        style=" display: flex;flex-direction: column;">
                        <div>
                            <div style="margin-top: 30px;">
                                <span style="margin-right: 20px;" @click='linshi()'>回复超时</span>
                                <el-radio v-model="radio" label="0">开启</el-radio>
                                <el-radio v-model="radio" label="1">关闭</el-radio>
                            </div>
                            
                             <div style="margin-top: 30px;" >
                                <span style="margin-right: 20px;display: inline-block;">超时时长</span>
                                <el-input-number v-model="num" @change="handleChange" :min="1"  label="描述文字" size="small" style="display: inline-block;width:160px;"></el-input-number>  (分钟)
                            </div>
                            
                            <div style="margin-top: 30px;" >
                                <span style="margin-right: 20px;display: inline-block;">记录时间段</span>
                                <el-checkbox-group v-model="checkboxGroup1" style="display: inline-block;">
                                     <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
                                   </el-checkbox-group>
                            </div>
                            
                             <div style="margin-top: 30px;">
                                <span style="margin-right: 20px;">设置提醒员工</span>
                                <el-button type="primary" size="small" @click="chose_yuangong">选择员工</el-button>
                            </div>
                            
                            
                        </div>
                    </el-form>
                    
                
                    
                    
                    <div style="width: 80%;display: flex;justify-content: center;margin-top: 40px;">
                        <el-button type="primary" size="small" @click="save_queding">保存</el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>
                
                
                


        </div>

       


        <el-dialog v-dialogDrag :visible.sync="yuangongopen" width="60%" height="600px" append-to-body title="选择员工">

            <div class="biaoqian_content">
                <!--选择员工-->
                <div class="biaoqian_left_content">
                    <div class="biaoqian_left_content_title">
                        <el-input placeholder="请输入关键字" v-model="addbiaoqianform.title"></el-input>
                        <el-button type="primary" size="mini" @click="querybiaoqian_yuangong">查询</el-button>
                        <el-button size="mini" @click="resetbiaoqian">重置</el-button>
                    </div>
                    <div class="biaoqian_left_content_content">
                        <div class="biaoqian_left_content_content_item" v-for="item in biaoqianlist"
                            :key="item.groups.id">
                            <div class="biaoqian_left_content_content_item_title">{{ item.groups.name }}</div>
                            <div class="biaoqian_left_content_content_item_content2">
                                <div class="biaoqian_left_content_content_item_content" v-for="item2 in item.tags"
                                    :key="item2.id">
                                    <div @click="clickbiaoqian(item.groups, item2)"
                                        :class="item2.click == 1 ? 'biaoqian_left_content_content_item_content_title2' : 'biaoqian_left_content_content_item_content_title'">
                                        {{ item2.name }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!--已选标签-->
                <div class="biaoqian_right_content">
                    <div>已选 {{ biaoqianlist_hav_count }} <span style="color:red;">点击删除</span></div>
                    <div class="biaoqian_right_content_item">
                        <!-- <div class="biaoqian_right_content_item_top">点击删除</div> -->
                        <div class="biaoqian_right_content_item_contnet">
                            <div @click="clickbiaoqiandel(item2.groups, item2.tags, index2)"
                                class="biaoqian_left_content_content_item_content_title"
                                v-for="(item2, index2) in biaoqianlist_hav" :key="index2">
                                {{ item2.tags.name }}
                            </div>

                        </div>
                    </div>
                </div>

            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="yuangongopen = false" size="small">取 消</el-button>
                <el-button type="primary" @click="submitbiaoqianForm_jiankong" size="small">确
                    定</el-button>
            </div>

        </el-dialog>


       
    </div>

</template>


<script>

    import Panle from '@/components/Panle';
    import {
        minganci_getlist,
        jinyong,
        del,
        add_minganci,
        minganci_getlist_trigger,
        minganci_getlist_trigger_export,
        jiankong,
        yujing,
        get_tags,
        chaoshi_getlist,
        chaoshi_save,
        trigger_chaoshi,
    } from '@/api/scrm/statistics/statistics';

    import {
        queryyuangong,
    } from '@/api/scrm/qunfa/qunfa';


    import PersButton from '@/components/PersButton';
    import {
        hasPermission
    } from '@/common/permission'
    import VueJsonExcel from 'vue-json-excel';
    const cityOptions = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
    export default {
        components: {
            Panle,
            PersButton,
            VueJsonExcel,
        },
        data() {
            return {
                checkboxGroup1: ['周一'],
                cities: cityOptions,
                num:10,
                biaoqianlist_qiye: [],
                biaoqianlist_hav_qiye: [],
                biaoqianlist_hav_count_qiye: 0,
                xuan_biaoqian_open: false,
                addbiaoqianform2: {
                    title: ''
                },

                biaoqianlist: [],
                biaoqianlist_hav: [],
                biaoqianlist_hav_count: 0,

                addbiaoqianform: {
                    title: ''
                },
                yuangongopen: false,
                radio: '1',
                value1: '',
                add_ci: '',
                add_ci_group: [],
                dialogFormVisible: false,
                activeName: 'second',
                loading: false,
                tableData: [],
                tableData_trigger: [],
                tableData_trigger_export: [],
                form: {
                    pageSize: 10,
                    pageNumber: 1,
                    total: 0,
                    pageSize_trigger: 10,
                    pageNumber_trigger: 1,
                    total_trigger: 0,
                    date: '',
                    yuangong:[]

                },
                jinyong_data: {
                    id: '',
                    type: '',
                },
                minganci_list: [],
                excelFields: {
                    "敏感词": "minganci",
                    "触发者": "trigger",
                    "消息时间": "createtime",
                    "涉及内容": "content",
                },
                yuangong_list:[],
                formLabelWidth: '120px',
                chaoshi:0,
            }
        },
        created() {

            this.init();
            // this.$watch(() => this.$route.path, () => {
            //     console.log('页面的路由是什么-----',this.$route.path);
            //     if (this.$route.path === '/live/invitation') {
            //         // 刷新页面数据的方法
            //         console.log('刷新页面');
            //         this.init();
            //     }
            // });
        },
        activated() {
            // 在页面返回时数据刷新
            console.log('activated');
            this.init();

        },
        methods: {
            hasPermission,
            init() {
                this.loading = true;
                
                chaoshi_getlist(this.form).then((res) => {
                    console.log(res);
                    this.tableData_trigger = res.data.list;
                    this.form.total_trigger = res.data.list_num
                    this.biaoqianlist_hav = res.data.tags
                    this.checkboxGroup1 = res.data.week_info
                    this.num = res.data.set_info.shichang
                    this.radio = res.data.chaoshi
                    this.chaoshi = res.data.chaoshi
                    this.loading = false;
                }),
                queryyuangong(this.addbiaoqianform).then((res) => {
                    console.log(res);
                    this.biaoqianlist = res.data.data;
                    this.yuangong_list = res.data.res;
                })
                

            },
			resetForm(){
				this.init()
			},
            linshi(){
                let data= {
                    'aid':'ShiNuBi',//员工的userid
                    'external_userid':'wmtj9NNgAAF4fV_qtQkDgQJdJqR3TVdA',//客户的 id
                    'message_id':'5826616429314403033_1724314363300_external',//1文本  2 音频  3 视频
                    'date_time':'2024-06-26 17:53:04',//触发敏感词的时间 
                    'direction':'1'
                    }
                trigger_chaoshi(data).then((res) => {
                    console.log(res);
                })
            },
            
            save_queding() {
                this.$confirm('确定保存吗', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
            
                    this.savepublish()
            
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            
            savepublish(){
              
                
                let tags = [];
                
                //员工
                this.biaoqianlist_hav.forEach(element => {
                    tags.push(element.tags.tagid);
                });
                
                console.log('单选框',this.radio)
                console.log('超时时长分钟数',this.num)
                console.log('星期',this.checkboxGroup1)
                console.log('选中的员工1', this.biaoqianlist_hav)
                console.log('选中的员工',tags)
                
                
                let data_save = {
                    "if_open": this.radio,
                    "num": this.num,
                    "week": this.checkboxGroup1,
                    "tags": tags,
                    "tagss": this.biaoqianlist_hav,
                }
                chaoshi_save(data_save).then((res) => {
                    console.log(res);
					this.$message({
					    type: 'success',
					    message: '保存成功'
					});
                    this.init()
                })
            },
            
             handleCheckedCitiesChange(value) {
                    // let checkedCount = value.length;
                    // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
                  },
            clickbiaoqian_qiye(group, tag) {
                let a = {
                    groups: group,
                    tags: tag
                };

                if (this.biaoqianlist_hav_qiye.length > 0) {
                    var b = true;
                    this.biaoqianlist_hav_qiye.forEach(element => {

                        if (a.tags.tagid == element.tags.tagid) {
                            b = false;
                        }
                    });
                    if (b) {
                        this.biaoqianlist_hav_qiye.push(a);
                    }
                } else {
                    this.biaoqianlist_hav_qiye.push(a);
                }


                this.biaoqianlist_hav_count_qiye = this.biaoqianlist_hav_qiye.length;
                this.biaoqianlist_qiye[group.groupid]['tags'][tag.tagid].click = 1;
                console.log(this.biaoqianlist_qiye[group.groupid]);
            },
            clickbiaoqiandel_qiye(group, tag, index) {

                this.biaoqianlist_hav_qiye.splice(index, 1);
                this.biaoqianlist_hav_count_qiye = this.biaoqianlist_hav_qiye.length;
                this.biaoqianlist_qiye[group.groupid]['tags'][tag.tagid].click = 0;

            },
            clickbiaoqian(group, tag) {
                let a = {
                    groups: group,
                    tags: tag
                };

                if (this.biaoqianlist_hav.length > 0) {
                    var b = true;
                    this.biaoqianlist_hav.forEach(element => {

                        if (a.tags.tagid == element.tags.tagid) {
                            b = false;
                        }
                    });
                    if (b) {
                        this.biaoqianlist_hav.push(a);
                    }
                } else {
                    this.biaoqianlist_hav.push(a);
                }


                this.biaoqianlist_hav_count = this.biaoqianlist_hav.length;
                this.biaoqianlist[group.groupid]['tags'][tag.tagid].click = 1;
                console.log(this.biaoqianlist[group.groupid]);
            },
            clickbiaoqiandel(group, tag, index) {

                this.biaoqianlist_hav.splice(index, 1);
                this.biaoqianlist_hav_count = this.biaoqianlist_hav.length;
                this.biaoqianlist[group.groupid]['tags'][tag.tagid].click = 0;

            },
            submitbiaoqianForm_jiankong() {
                this.yuangongopen = false;
                // let tags = [];
                // let tags2 = [];
                // let tags3 = [];
                // let tags4 = [];

                // this.biaoqianlist_hav.forEach(element => {
                //     tags.push(element.tags.tagid);
                // });


                // let data_yuangong = {
                //     "tags": tags,
                //     "tagss": this.biaoqianlist_hav,

                // }
                // console.log('我是data333333333331', this.biaoqianlist_hav);
                // jiankong(data_yuangong).then((res) => {
                //     console.log(res);
                //     this.yuangongopen = false;
                // });
            },
            submitbiaoqianForm_yujing() {

                let tags = [];
                let tags2 = [];
                let tags3 = [];
                let tags4 = [];

                //含有标签
                this.biaoqianlist_hav_qiye.forEach(element => {
                    tags2.push(element.tags.tagid);
                });

                let data_yuangong = {
                    "tags2": tags2,
                    "tags22": this.biaoqianlist_hav_qiye,
                }
                console.log('我是data333333333331', this.biaoqianlist_hav_qiye);
                yujing(data_yuangong).then((res) => {
                    console.log(res);
                    this.xuan_biaoqian_open = false;
                });
            },

            search() {
                console.log('我是表单323232', this.form)
                chaoshi_getlist(this.form).then((res) => {
                    console.log(res);
                    
                    this.tableData_trigger = res.data.list;
                    this.form.total_trigger = res.data.list_num
                    this.loading = false;
                })
               
            },
            querybiaoqian_yuangong() {
                console.log('点击员工查询名字', this.addbiaoqianform)
                queryyuangong(this.addbiaoqianform).then((res) => {
                    console.log(res);
                    this.biaoqianlist = res.data.data;
                })
            },
            resetbiaoqian() {
                this.addbiaoqianform = {
                    title: ''
                };
                this.init();
            },
            chose_yuangong() {
                this.yuangongopen = true;
            },
            chose_yuangong_yujing() {
                this.xuan_biaoqian_open = true;
            },
            addMinganci() {
                this.dialogFormVisible = true
            },
            handleClick(tab, event) {
                console.log(tab.name);
                if(tab.name == 'third'){
                    queryyuangong(this.addbiaoqianform).then((res) => {
                        console.log(res);
                        this.biaoqianlist = res.data.data;
                        this.yuangong_list = res.data.res;
                    })
                }
            },
            del(e) {
                del(e).then((res) => {
                    console.log(res.data.flag);
                    if (res.data.flag) {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                    }
                    this.init();
                    this.loading = false;
                })
            },
            jinyong(e, p) {
                this.jinyong_data.id = e
                this.jinyong_data.type = p
                jinyong(this.jinyong_data).then((res) => {
                    console.log(res.data.flag);
                    if (res.data.flag) {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                    }
                    this.init();
                    this.loading = false;
                })
            },
            handleClose(index) {
                console.log('我是第几个', index)
                this.add_ci_group.splice(index, 1);
            },
            //新建词儿的数组加添加数据 
            handleInputConfirm() {
                this.add_ci_group.push(this.add_ci)
                this.add_ci = ''
                console.log(this.add_ci_group)
            },
            add_ci_queding() {
                this.dialogFormVisible = false
                add_minganci(this.add_ci_group).then((res) => {
                    console.log(res);
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                    this.add_ci_group = []
                    this.loading = false;
                })

            },
            handleSizeChange: function(e) {
                console.log(e);
                this.form.pageSize = e;
                this.init();
            },
            handleCurrentChange: function(e) {
                console.log(e);
                this.form.pageNumber = e;
                this.init();
            },


        }
    }
</script>


<style lang="scss" scoped>
    .scroll-container {
        display: flex;
        margin-top: 10px;
        width: 100%;
        /* 设置容器宽度 */
        overflow-x: auto;
        /* 使得当内容宽度超过容器宽度时可以横向滚动 */
    }

    .content {
        display: flex;
        white-space: nowrap;
        /* 防止内容换行 */
        padding: 5px;
    }

    .line {
        width: 100%;
        height: 20px;
    }

    .plan_content {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .plan_content_item {
        /* width: 200px; */
        height: 120px;
        border-width: 1px;
        border-color: rgb(245, 247, 251);
        border-style: solid;
        background-color: rgb(245, 247, 251);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-left: 20px;
        padding: 10px;
    }

    .plan_content_item2 {
        /* width: 200px; */
        height: 120px;
        border-width: 1px;
        border-color: blue;
        border-style: solid;
        background-color: rgb(245, 247, 251);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-left: 20px;
        padding: 10px;
    }

    .plan_content_item3 {
        /* width: 200px; */
        height: 80px;
        border-width: 1px;
        border-color: rgb(245, 247, 251);
        border-style: solid;
        background-color: rgb(245, 247, 251);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-left: 20px;
        padding: 10px;
    }

    .plan_jishu {
        color: black;
        font-weight: bold;
        font-size: large;
    }

    .live_info_content {
        display: flex;
    }

    .live_info_img {
        width: 100px;
    }

    .info_content {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-left: 20px;
    }

    .title_content {
        font-size: medium;
        font-weight: bold;
    }

    .shijian_content {
        font-size: medium;
    }

    .yaoyuejihua_label {
        font-size: medium;
        font-weight: bold;
        margin-bottom: 20px;
        margin-top: 20px;
    }


    .live_content {
        display: flex;
        flex-direction: column;
    }





    .biaoqian_content {
        display: flex;
        width: 100%;
    }

    .biaoqian_content2 {
        display: flex;
        width: 100%;
    }

    .biaoqian_left_content {
        margin: 10px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(241, 241, 241);
        display: flex;
        flex-direction: column;
        width: 60%;
        overflow-y: scroll;
        /* 启用垂直滚动 */
        max-height: 500px;
        overflow: auto;
        /* 隐藏滚动条 */
        padding: 20px;
    }

    .biaoqian_right_content {
        margin: 10px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(180, 180, 180);
        display: flex;
        flex-direction: column;
        width: 30%;
        overflow-y: scroll;
        /* 启用垂直滚动 */
        max-height: 500px;
        overflow: auto;
        /* 隐藏滚动条 */
        padding: 20px;
    }

    .biaoqian_right_content2 {
        margin: 10px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(180, 180, 180);
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow-y: scroll;
        /* 启用垂直滚动 */
        max-height: 500px;
        overflow: auto;
        /* 隐藏滚动条 */
        padding: 20px;
    }

    .biaoqian_left_content_title {
        display: flex;
    }

    .biaoqian_left_content_content_item_title {
        font-weight: bold;
    }

    .biaoqian_left_content_content {
        display: flex;
        flex-direction: column;
    }

    .biaoqian_left_content_content_item {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }

    .biaoqian_left_content_content_item_content2 {
        display: flex;
        margin-bottom: 10px;
        flex-wrap: wrap;
        margin-top: 10px;
    }

    .biaoqian_left_content_content_item_content {
        display: flex;
        padding: 2px;
        margin-left: 10px;
        margin-left: 10px;
    }

    .biaoqian_left_content_content_item_content_title {
        border-color: #dfdfdf;
        border-width: 1px;
        border-style: solid;
        margin: 5px;
        padding: 5px;
        border-radius: 5px;
    }

    .biaoqian_left_content_content_item_content_title2 {
        border-color: blue;
        border-width: 1px;
        border-style: solid;
        margin: 5px;
        padding: 5px;
        border-radius: 5px;
    }

    .biaoqian_right_content_item_top {
        margin-top: 10px;
        margin-bottom: 10px;
        color: red;
    }

    .biaoqian_right_content_item_top2 {
        margin-top: 2px;
        margin-bottom: 10px;
        color: red;
    }

    .biaoqian_right_content_item {
        display: flex;
        flex-direction: column
    }

    .biaoqian_right_content_item_contnet {
        display: flex;
        margin-bottom: 10px;
        flex-wrap: wrap;
        justify-content: space-evenly;
        margin-top: 10px;
    }

    .biaoqian_right_content_label {
        border-color: rgb(245, 247, 251);
        border-width: 1px;
        border-style: solid;
    }

    .demonstration {
        width: 100px;
    }

    .renyuan_content {
        display: flex;
        width: 100%;
    }

    .yaoyue_neirong_content {
        display: flex;
    }


    .yaoyue_neirong_content_body {
        display: flex;
        flex-direction: column;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(180, 180, 180);
        padding: 10px;
        margin-left: 10px;
        width: 90%;
    }

    .yaoyue_neirong_content_title {
        width: 10%;
    }

    .yaoyue_neirong_content {
        width: 80%;
    }
</style>